<template>
  <Maximize v-if="maximize" />
  <Tabs v-if="tabs" />
  <el-main style="height: 100%">
    <a-spin :spinning="LoadingConfig.contentLoading" :delay="500" :tip="LoadingConfig.contentTip">
      <router-view v-slot="{ Component, route }">
        <transition appear name="fade-transform" mode="out-in">
          <keep-alive :include="keepAliveList">
            <component :is="formatComponentInstance(Component, route)" :key="route.fullPath" v-if="isRouterShow" />
          </keep-alive>
        </transition>
      </router-view>
    </a-spin>
  </el-main>
  <el-footer v-if="footer">
    <Footer />
  </el-footer>
</template>

<script setup lang="ts">
import { ref, onBeforeUnmount, provide, watch, computed, h } from "vue";
import { storeToRefs } from "pinia";
import { useDebounceFn } from "@vueuse/core";
import { useGlobalStore } from "@/stores/modules/global";
import { useAppStore } from "@/stores/modules/app";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
import Maximize from "./components/Maximize.vue";
import Tabs from "@/layouts/components/Tabs/index.vue";
import Footer from "@/layouts/components/Footer/index.vue";

const globalStore = useGlobalStore();
const appStore = useAppStore();
const keepAliveStore = useKeepAliveStore();
const { maximize, isCollapse, layout, tabs, footer } = storeToRefs(globalStore);
const LoadingConfig = computed(() => appStore.LoadingConfig); // 局部加载配置
// const { keepAliveName } = storeToRefs(keepAliveStore);
// 页面缓存数组
const keepAliveList = ref([]);
// 注入刷新页面方法
const isRouterShow = ref(true);
const refreshCurrentPage = (val: boolean) => (isRouterShow.value = val);
provide("refresh", refreshCurrentPage);
// 监听当前页面是否最大化，动态添加 class
watch(
  () => maximize.value,
  () => {
    const app = document.getElementById("app") as HTMLElement;
    if (maximize.value) app.classList.add("main-maximize");
    else app.classList.remove("main-maximize");
  },
  { immediate: true }
);
// 监听布局变化，在 body 上添加相对应的 layout class
watch(
  () => layout.value,
  () => {
    const body = document.body as HTMLElement;
    body.setAttribute("class", layout.value);
  },
  { immediate: true }
);

// 监听窗口大小变化，折叠侧边栏
const screenWidth = ref(0);
const listeningWindow = useDebounceFn(() => {
  screenWidth.value = document.body.clientWidth;
  if (!isCollapse.value && screenWidth.value < 1200) globalStore.setGlobalState("isCollapse", true);
  if (isCollapse.value && screenWidth.value > 1200) globalStore.setGlobalState("isCollapse", false);
}, 100);
window.addEventListener("resize", listeningWindow, false);
onBeforeUnmount(() => {
  window.removeEventListener("resize", listeningWindow);
});
// 用来存已经创建的组件
const wrapperMap = new Map();
// 对当前加载的页面进行重新创建将path传给name
const formatComponentInstance = (component: any, route: any) => {
  // 创建临时变量
  let wrapper;
  // 判断组件是否存在
  if (component) {
    // 将路径赋值给新的变量
    const wrapperName = route.path;
    // 给页面缓存数组添加值
    if (route.meta.isKeepAlive) {
      keepAliveList.value.push(wrapperName);
    }
    // 判断 wrapperMap 中是否已经存在 wrapperName 对应的组件实例
    if (wrapperMap.has(wrapperName)) {
      // 将 wrapperName 对应的组件实例对象赋值给wrapper
      wrapper = wrapperMap.get(wrapperName);
    } else {
      // 创建一个新的组件实例对象，并将其设置为 wrapper
      wrapper = {
        name: wrapperName,
        render() {
          return h(component);
        }
      };
      // 将组件实例对象添加到 wrapperMap 中
      wrapperMap.set(wrapperName, wrapper);
    }
    // 创建的新的组件实例
    return h(wrapper);
  }
};
</script>

<style scoped lang="scss">
@import "./index.scss";
.ant-spin-nested-loading {
  height: 100%;
  :deep(.ant-spin-container) {
    height: 100%;
  }
}
</style>
